<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2021/10/21
  Time: 13:37
  To change this template use File | Settings | File Templates.
--%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <base href="<%=basePath%>"/>
    <title>菜单管理</title>
    <link rel="stylesheet" type="text/css" href="static/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="static/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="static/themes/demo.css">
    <link rel="stylesheet" type="text/css" href="static/themes/color.css">
    <script type="text/javascript" src="static/jquery.min.js"></script>
    <script type="text/javascript" src="static/jquery.easyui.min.js"></script>
    <script type="text/javascript">
        /****增加菜单信息****/
        $(function () {
            //初始化菜单添加对话框，当对话框关闭时，清空表单内容
            $("#addMenuDialog").dialog({
                onClose:function () {
                    $('#menuAddForm').form('reset')
                }
            })
            //给增加菜单按钮添加单击事件
            $("#menuAdd").click(function () {
                //获取用户选择的要增加子菜单的上级菜单的id
                var node = $("#menuTree").tree('getSelected');
                if (node!=null){
                    $("#pid").val(node.id);//记录要增加菜单的上级
                }else {

                }
                //显示菜单增加的对话框
                $("#addMenuDialog").dialog('open')
            })
            //给完成增加按钮增加单击事件完成表单的异步提交
            $('#addMenuForm').click(function () {
                //异步提交表单
                $("#menuAddForm").form('submit',{
                    success:function (data) {
                         eval("var d ="+data);
                         if (d.success){
                             $.messager.alert("提示","增加成功","info")
                             //刷新异步树
                             $("#menuTree").tree('reload');
                             $("#addMenuDialog").dialog("close")
                         }else {
                             $.messager.alert("提示","增加失败","info")
                         }
                    }
                })
            })
        })
        /****编辑菜单信息****/
        $(function () {
            //给编辑菜单按钮增加单击事件
            $("#menuEdit").click(function () {
                //判断用户是否选择要编辑的菜单信息
                var node = $("#menuTree").tree('getSelected');
                if(node!=null){
                    //回显菜单数据到表单中
                    $("#menuEditForm").form('load',{
                        mid:node.id,
                        mname:node.text,
                        url:node.attributes.url,
                        mdesc:node.attributes.mdesc,
                    })
                    //显示菜单编辑的对话框
                    $("#EditMenuDialog").dialog('open')
                }else {
                    $.messager.alert("提示","请只能选择一个菜单","error");
                }
            })
            //异步提交表单
            $('#editMenuForm').click(function () {
                $('#menuEditForm').form('submit',{
                    success:function (data) {
                        eval("var d =" + data);
                        if (d.success) {
                            $.messager.alert("提示", "更新成功", "info")
                            //刷新异步树
                            $("#menuTree").tree('reload');
                            $("#editMenuForm").dialog("close")
                        } else {
                            $.messager.alert("提示", "更新失败", "info")
                        }
                    }
            })
            })
        })
        /****删除菜单信息****/
        $(function () {
            //给删除菜单按钮增加单击事件
            $("#menuDel").click(function () {
                //给编辑菜单按钮增加单击事件
                    //判断用户是否选择要编辑的菜单信息
                    var node = $("#menuTree").tree('getSelected');
                    if(node!=null){
                        $.messager.confirm("提示","是否删除?",function (r) {
                            if(r){
                                //发起ajax请求完成删除,参数mid/pid/isparent
                                $.post("menu/menuDel",{mid:node.id,pid:node.attributes.pid},function (data) {
                                    //判断
                                    if(data.success){
                                        $.messager.alert("提示","删除成功","info");
                                        //重新加载
                                        $('#menuTree').tree("reload");
                                    }else{
                                        $.messager.alert("提示","删除失败","info");
                                    }
                                })
                            }
                        });

                    }else {
                        $.messager.alert("提示","请只能选择一个菜单","error");
                    }

            })
        })
    </script>
</head>
<body>
<%--创建编辑菜单信息的对话框--%>
<div id="EditMenuDialog" class="easyui-dialog" title="编辑菜单" style="width:400px;height:300px;"
     data-options="iconCls:'icon-save',resizable:true,modal:true,closed:true">
    <%--创建编辑菜单表单--%>
    <form id="menuEditForm" action="menu/meunEdit" method="post" style="margin: auto;text-align: center">
        <input type="hidden" name="mid" id="mid" value="">
        <div style="margin-bottom:20px;margin-top: 25px">
            <input  class="easyui-textbox" name="mname" prompt="请输入菜单名称" iconWidth="28" style="width:100%;height:34px;padding:10px;">
        </div>
        <div style="margin-bottom:20px">
            <input  class="easyui-textbox" name="url" prompt="请输入url" iconWidth="28" style="width:100%;height:34px;padding:10px;">
        </div>
        <div style="margin-bottom:20px">
            <input  class="easyui-textbox" name="mdesc" prompt="请输入菜单描述" iconWidth="28" style="width:100%;height:34px;padding:10px;">
        </div>
        <%--操作按钮--%>
        <div style="margin-bottom:20px">
            <a  href="javascrip:void(0)" id="editMenuForm" class="easyui-linkbutton c3" style="width: 120px">更新</a>
        </div>
    </form>
</div>

<%--创建增加菜单信息的对话框--%>
<div id="addMenuDialog" class="easyui-dialog" title="增加菜单" style="width:400px;height:300px;"
     data-options="iconCls:'icon-save',resizable:true,modal:true,closed:true">
    <%--创建增加菜单表单--%>
    <form id="menuAddForm" action="menu/menuAdd" method="post" style="margin: auto;text-align: center">
        <input type="hidden" name="pid" id="pid" value="">
        <div style="margin-bottom:20px;margin-top: 25px">
            <input id="111" class="easyui-textbox" name="mname" prompt="请输入菜单名称" iconWidth="28" style="width:100%;height:34px;padding:10px;">
        </div>
        <div style="margin-bottom:20px">
            <input id="222" class="easyui-textbox" name="url" prompt="请输入url" iconWidth="28" style="width:100%;height:34px;padding:10px;">
        </div>
        <div style="margin-bottom:20px">
            <input id="333" class="easyui-textbox" name="mdesc" prompt="请输入菜单描述" iconWidth="28" style="width:100%;height:34px;padding:10px;">
        </div>
        <%--操作按钮--%>
        <div style="margin-bottom:20px">
            <a  href="javascrip:void(0)" id="addMenuForm" class="easyui-linkbutton c3" style="width: 120px">增加</a>
        </div>
    </form>
</div>

<%--创建菜单管理面板，完成嵌套效果--%>
<div style="margin:20px 0 10px 0;"></div>
<div class="easyui-panel" style="width:700px;height:500px;padding:10px;">
    <div class="easyui-layout" data-options="fit:true">
        <div data-options="region:'west',split:false,title:'操作',collapsible:false" style="width:200px;padding:10px;text-align: center">
                <a id="menuAdd" href="javascript:void(0)" class="easyui-linkbutton" style="width:120px;margin: 14px" data-options="toggle:true,group:'g1'">增加菜单</a><br>
                <a id="menuEdit" href="javascript:void(0)" class="easyui-linkbutton" style="width:120px;margin: 14px" data-options="toggle:true,group:'g1'">编辑菜单</a><br>
                <a id="menuDel" href="javascript:void(0)" class="easyui-linkbutton" style="width:120px;margin: 14px" data-options="toggle:true,group:'g1'">删除菜单</a><br>
                <a href="javascript:void(0)" class="easyui-linkbutton" style="width:120px;margin: 14px" data-options="toggle:true,group:'g1'">刷新菜单</a><br>
        </div>
        <div data-options="region:'center',title:'当前系统菜单'" style="padding:10px">
            <%--创建ul组件加载所有的菜单信息--%>
                <ul class="easyui-tree" id="menuTree" data-options="url:'menu/menuAllInfo'"></ul>
        </div>
    </div>
</div>
</body>
</html>
